<template>
	<el-card class="box-card">

		<el-row class="btnLeft">
			<el-button type="primary" @click="add">添加角色</el-button>
		</el-row>
		<el-dialog title="提示" :visible.sync="dialogVisibleData" width="36%" :show-close="false">
			<addRole />
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible">取 消</el-button>
				<el-button type="primary" @click="dialogVisibled">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 角色表格组件 -->

		<RoleTable />
	</el-card>
</template>
<script>
import RoleTable from './Table.vue'
import addRole from './addRole.vue'
export default {
	name: 'Card',
	data() {
		return {
			dialogVisibleData: false,
		}
	},
	components: {

		RoleTable,
		addRole,

	},
	methods: {
		dialogVisible() {
			this.dialogVisibleData = false
			this.$bus.$emit('RolesResetFields')
		},
		dialogVisibled() {
			this.$bus.$emit('RolesValidate')
			this.dialogVisibleData = false
			this.$bus.$emit('RolesResetFields')
		},
		add() {
			this.dialogVisibleData = true
		},

	},
}
</script>
<style scoped>
.el-card__body {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.btnLeft button {
	float: left;
}

.btnLeft {
	margin-bottom: 12px;

}
</style>
